<template>
  <div style="height: 100%;position: relative;" class="body">
    <!--代金券-->
    <div class="menu daijin" style="height: 85%!important;" v-if="0">
      <div class="a_top">
        <el-row style="width:100%;position:absolute;top:0%;border-bottom:none;">
          <el-col :span="8">
            <div class="grid-content bg-purple" style="margin-left:0;"><span class="font_acut">优惠券列表/</span><span
              class="font_cut">新建代金券</span></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light" style="text-align:right;">
          <span class="wrapper">
            <el-button type="button" class="xj_fullcut" @click="go_back">返回</el-button>
            <el-button type="button" class="xj_fullcut" @click="addCashCoupons">保存</el-button>
            </span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="height: 100%;overflow: auto;">
        <el-form ref="form" :model="cashForm" label-width="80px" style="margin-top: 10px;">
          <el-form-item label="券名称:">
            <el-input v-model="cashForm.couponName"></el-input>
          </el-form-item>
          <el-form-item label="标签名称:">
            <el-input v-model="cashForm.labelName"></el-input>
          </el-form-item>
          <el-form-item label="营销经费">
            <el-radio-group v-model="cashForm.funds">
              <el-radio label="商家承担"></el-radio>
              <el-radio label="你家承担"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库存量:">
            <el-input v-model="cashForm.inventory"></el-input><span class="spandj">张</span>
          </el-form-item>
          <el-form-item label="每人限领:">
            <el-input v-model="cashForm.limit"></el-input><span class="spandj">张</span>
          </el-form-item>
          <el-form-item label="券面值:">
            <el-input v-model="cashForm.parValue"></el-input><span class="spandj">元</span>
          </el-form-item>
          <el-form-item label="使用限制:">
            <el-input v-model="cashForm.userLimit"></el-input><span class="spandj">元可用</span>
          </el-form-item>
          <el-form-item label="限制说明:">
            <el-input v-model="cashForm.limitExplain" ></el-input>
          </el-form-item>

          <el-form-item label="活动时间:">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="cashForm.dateStart" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">--</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="cashForm.dateEnd" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <div style="margin-left: 80px;">
            <el-radio v-model="cashForm.radio" label="有效期内,任意时段"></el-radio>
          </div>
          <div style="margin: 10px 0 10px 80px;">
            <el-radio v-model="cashForm.radio" label="有效期内,指定时段"></el-radio>
          </div>

          <el-form-item label="" style="width: 100%!important;margin-bottom: 0;" v-if="cashForm.radio=='有效期内,指定时段'">
            <el-checkbox-group v-model="cashForm.date">
              <el-checkbox label="周一" name="type"></el-checkbox>
              <el-checkbox label="周二" name="type"></el-checkbox>
              <el-checkbox label="周三" name="type"></el-checkbox>
              <el-checkbox label="周四" name="type"></el-checkbox>
              <el-checkbox label="周五" name="type"></el-checkbox>
              <el-checkbox label="周六" name="type"></el-checkbox>
              <el-checkbox label="周日" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="营业时间">
            <div style="margin-bottom: 10px;">
              <el-input v-model="cashForm.date1" style="width: 100px;"></el-input>
              <span style="display: inline-block;margin: 0 10px 0 10px">至</span>
              <el-input v-model="cashForm.date2" style="width: 100px;"></el-input><span class="span1" @click="addTime">+</span>
            </div>
            <div v-if="businessTime2">
          <el-input v-model="cashForm.date3" style="width: 100px;"></el-input>
          <span style="display: inline-block;margin: 0 10px 0 10px">至</span>
          <el-input v-model="cashForm.date4" style="width: 100px;"></el-input>
              <span class="span1" @click="businessTimeFn2" style="margin-left: 7px;">-</span>
        </div>
          </el-form-item>
          <el-form-item label="卡券功能:" style="width: 100%!important;margin-bottom: 0;">
            <el-checkbox-group v-model="cashForm.type">
              <el-checkbox label="允许用户将代金券插入卡包" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="使用说明:" style="margin-top: 10px;">
            <el-input type="textarea" v-model="cashForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--满减券-->
    <div class="menu daijin" style="height: 85%!important;" v-if="0">
      <div class="a_top">
        <el-row style="width:100%;position:absolute;top:0%;border-bottom:none;">
          <el-col :span="8">
            <div class="grid-content bg-purple" style="margin-left:0;"><span class="font_acut">优惠券列表/</span><span
              class="font_cut">新建满减券</span></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light" style="text-align:right;">
          <span class="wrapper">
            <el-button type="button" class="xj_fullcut" @click="go_back">返回</el-button>
            <el-button type="button" class="xj_fullcut" @click="addsSatisfyCoupons">保存</el-button>
            </span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="height: 100%;overflow: auto;">
        <el-form ref="form" :model="satisfyForm" label-width="80px" style="margin-top: 10px;">
          <el-form-item label="券名称:">
            <el-input v-model="satisfyForm.couponName"></el-input>
          </el-form-item>
          <el-form-item label="标签名称:">
            <el-input v-model="satisfyForm.labelName"></el-input>
          </el-form-item>
          <el-form-item label="营销经费">
            <el-radio-group v-model="satisfyForm.funds">
              <el-radio label="商家承担"></el-radio>
              <el-radio label="你家承担"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库存量:">
            <el-input v-model="satisfyForm.inventory"></el-input><span class="spandj">张</span>
          </el-form-item>
          <el-form-item label="每人限领:">
            <el-input v-model="satisfyForm.limit"></el-input><span class="spandj">张</span>
          </el-form-item>
          <el-form-item label="减少金额:">
            <el-input v-model="satisfyForm.parValue"></el-input><span class="spandj">元</span>
          </el-form-item>
          <el-form-item label="使用限制:">
            <el-input v-model="satisfyForm.userLimit"></el-input><span class="spandj">元可用</span>
          </el-form-item>
          <el-form-item label="限制说明:">
            <el-input v-model="satisfyForm.limitExplain" ></el-input>
          </el-form-item>

          <el-form-item label="活动时间:">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="satisfyForm.dateStart" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">--</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="satisfyForm.dateEnd" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <div style="margin-left: 80px;">
            <el-radio v-model="satisfyForm.radio" label="有效期内,任意时段"></el-radio>
          </div>
          <div style="margin: 10px 0 10px 80px;">
            <el-radio v-model="satisfyForm.radio" label="有效期内,指定时段"></el-radio>
          </div>

          <el-form-item label="" style="width: 100%!important;margin-bottom: 0;" v-if="satisfyForm.radio=='有效期内,指定时段'">
            <el-checkbox-group v-model="satisfyForm.date">
              <el-checkbox label="周一" name="type"></el-checkbox>
              <el-checkbox label="周二" name="type"></el-checkbox>
              <el-checkbox label="周三" name="type"></el-checkbox>
              <el-checkbox label="周四" name="type"></el-checkbox>
              <el-checkbox label="周五" name="type"></el-checkbox>
              <el-checkbox label="周六" name="type"></el-checkbox>
              <el-checkbox label="周日" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="营业时间">
            <div style="margin-bottom: 10px;">
              <el-input v-model="satisfyForm.date1" style="width: 100px;"></el-input>
              <span style="display: inline-block;margin: 0 10px 0 10px">至</span>
              <el-input v-model="satisfyForm.date2" style="width: 100px;"></el-input><span class="span1" @click="addTime">+</span>
            </div>
            <div v-if="businessTime2">
              <el-input v-model="satisfyForm.date3" style="width: 100px;"></el-input>
              <span style="display: inline-block;margin: 0 10px 0 10px">至</span>
              <el-input v-model="satisfyForm.date4" style="width: 100px;"></el-input>
              <span class="span1" @click="businessTimeFn2" style="margin-left: 7px;">-</span>
            </div>
          </el-form-item>
          <el-form-item label="卡券功能:" style="width: 100%!important;margin-bottom: 0;">
            <el-checkbox-group v-model="satisfyForm.type">
              <el-checkbox label="允许用户将代金券插入卡包" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="使用说明:" style="margin-top: 10px;">
            <el-input type="textarea" v-model="satisfyForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--折扣券-->
    <div class="menu daijin" style="height: 85%!important;">
      <div class="a_top">
        <el-row style="width:100%;position:absolute;top:0%;border-bottom:none;">
          <el-col :span="8">
            <div class="grid-content bg-purple" style="margin-left:0;"><span class="font_acut">优惠券列表/</span><span
              class="font_cut">新建折扣券</span></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light" style="text-align:right;">
          <span class="wrapper">
            <el-button type="button" class="xj_fullcut" @click="go_back">返回</el-button>
            <el-button type="button" class="xj_fullcut" @click="addDiscountCoupons">保存</el-button>
            </span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="height: 100%;overflow: auto;">
        <el-form ref="form" :model="discountForm" label-width="100px" style="margin-top: 10px;">
          <el-form-item label="券名称:">
            <el-input v-model="discountForm.couponName"></el-input>
          </el-form-item>
          <el-form-item label="标签名称:">
            <el-input v-model="discountForm.labelName"></el-input>
          </el-form-item>
          <el-form-item label="营销经费">
            <el-radio-group v-model="discountForm.funds">
              <el-radio label="商家承担"></el-radio>
              <el-radio label="你家承担"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库存量:">
            <el-input v-model="discountForm.inventory"></el-input><span class="spandj">张</span>
          </el-form-item>
          <el-form-item label="每人限领:">
            <el-input v-model="discountForm.limit"></el-input><span class="spandj">张</span>
          </el-form-item>
          <el-form-item label="折扣:">
            <el-input v-model="discountForm.parValue"></el-input><span class="spandj">元</span>
          </el-form-item>
          <el-form-item label="使用限制:">
            <span>消费满</span>
            <el-input v-model="discountForm.userLimit" style="width: 180px;margin-left: 10px;"></el-input>
            <span class="spandj">元可用</span>
          </el-form-item>
          <el-form-item label="限制说明:">
            <el-input v-model="discountForm.limitExplain" ></el-input>
          </el-form-item>
          <el-form-item label="单笔优惠上限:">
            <el-input v-model="discountForm.limitAll" ></el-input>
          </el-form-item>
          <el-form-item label="活动时间:">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="discountForm.dateStart" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">--</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="discountForm.dateEnd" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <div style="margin-left: 80px;">
            <el-radio v-model="discountForm.radio" label="有效期内,任意时段"></el-radio>
          </div>
          <div style="margin: 10px 0 10px 80px;">
            <el-radio v-model="discountForm.radio" label="有效期内,指定时段"></el-radio>
          </div>

          <el-form-item label="" style="width: 100%!important;margin-bottom: 0;" v-if="discountForm.radio=='有效期内,指定时段'">
            <el-checkbox-group v-model="discountForm.date">
              <el-checkbox label="周一" name="type"></el-checkbox>
              <el-checkbox label="周二" name="type"></el-checkbox>
              <el-checkbox label="周三" name="type"></el-checkbox>
              <el-checkbox label="周四" name="type"></el-checkbox>
              <el-checkbox label="周五" name="type"></el-checkbox>
              <el-checkbox label="周六" name="type"></el-checkbox>
              <el-checkbox label="周日" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="营业时间">
            <div style="margin-bottom: 10px;">
              <el-input v-model="discountForm.date1" style="width: 100px;"></el-input>
              <span style="display: inline-block;margin: 0 10px 0 10px">至</span>
              <el-input v-model="discountForm.date2" style="width: 100px;"></el-input><span class="span1" @click="addTime">+</span>
            </div>
            <div v-if="businessTime2">
              <el-input v-model="discountForm.date3" style="width: 100px;"></el-input>
              <span style="display: inline-block;margin: 0 10px 0 10px">至</span>
              <el-input v-model="discountForm.date4" style="width: 100px;"></el-input>
              <span class="span1" @click="businessTimeFn2" style="margin-left: 7px;">-</span>
            </div>
          </el-form-item>
          <el-form-item label="卡券功能:" style="width: 100%!important;margin-bottom: 0;">
            <el-checkbox-group v-model="discountForm.type">
              <el-checkbox label="允许用户将代金券插入卡包" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="使用说明:" style="margin-top: 10px;">
            <el-input type="textarea" v-model="discountForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        cashForm: {
          couponName: '',
          labelName: '',
          funds: '商家承担',//承担经费
          inventory: '',//库存
          limit: '',//每人限领
          parValue: '',//券面z值
          userLimit: '',//使用限制
          limitExplain: '',//限制说明
          dateStart: '',
          dateEnd: '',
          radio:'有效期内,任意时段',
          ticket:'',//卡券功能
          instructions:'',//使用说明
          date:'',//限制时间
          date1:'',//限制时间
          date2:'',//限制时间
          date3:'',//限制时间
          date4:'',//限制时间
          type:'',//shi否放入卡包
          desc:'',//说明
        },
        satisfyForm: {
          couponName: '',
          labelName: '',
          funds: '商家承担',//承担经费
          inventory: '',//库存
          limit: '',//每人限领
          parValue: '',//减少金额
          userLimit: '',//使用限制
          limitExplain: '',//限制说明
          dateStart: '',
          dateEnd: '',
          radio:'有效期内,任意时段',
          ticket:'',//卡券功能
          instructions:'',//使用说明
          date:'',//限制时间
          date1:'',//限制时间
          date2:'',//限制时间
          date3:'',//限制时间
          date4:'',//限制时间
          type:'',//shi否放入卡包
          desc:'',//说明
        },
        discountForm: {
          couponName: '',
          labelName: '',
          funds: '商家承担',//承担经费
          inventory: '',//库存
          limit: '',//每人限领
          parValue: '',//减少金额
          userLimit: '',//使用限制
          limitExplain: '',//限制说明
          dateStart: '',
          dateEnd: '',
          radio:'有效期内,任意时段',
          ticket:'',//卡券功能
          instructions:'',//使用说明
          date:'',//限制时间
          date1:'',//限制时间
          date2:'',//限制时间
          date3:'',//限制时间
          date4:'',//限制时间
          type:'',//shi否放入卡包
          desc:'',//说明
          limitAll:'',//单笔优惠限制
        },
        num:0,
        businessTime2:false,
        businessTime3:false,
        flag:false,
      }
    },
    created(){
      this.couponType = this.$store.state.couponType;
      this.couponTypeId = this.$store.state.couponTypeId;
      this.$http.get(`${this.$store.state.path}couponUserLimit/`)
        .then(res => {
          console.log(res.body.result)
          this.limitList = res.body.result;//获取优惠券限制
        }, res => {

        })
    },
    methods: {
      addCashCoupons(){
        let timer1 = this.coverTimer(this.value0 + '');
        let timer2 = this.coverTimer(this.value1 + '');
        let checkList = this.checkList.join(',');
        let price = Number(this.price);
        if(!price){
          this.dialogVisible = true;
          this.c_data = "请输入折扣率"
          return
        }
        if(price.toString().indexOf('.')>0){
          if (price.toString().split(".")[1].length>1){
            this.dialogVisible = true;
            this.c_data = "最多可输入小数点后一位【如“8”或“8.5”】"
            return
          }
        }
        if(!this.rule_price){
          this.dialogVisible = true;
          this.c_data = "请输入限制金额"
          return
        }
        console.log(timer1+'---'+timer2)
        if (timer1=='NaN-NaN-NaN'||!timer2=='NaN-NaN-NaN'){
          this.dialogVisible = true;
          this.c_data = "请选择优惠券有效时间"
          return
        }
        if(Number(Date.parse(timer1))>Number(Date.parse(timer2))){
          this.dialogVisible = true;
          this.c_data = "开始时间不能超过结束时间"
          return
        }
        if (price < 0 || price > 10) {
          this.dialogVisible = true;
          this.c_data = "折扣必须是大于0小于10的数"
          return
        }
        let json = {
          "cardType": "2",
          cashForm: {
            couponName: '',
            labelName: '',
            funds: '商家承担',//承担经费
            inventory: '',//库存
            limit: '',//每人限领
            parValue: '',//券面z值
            userLimit: '',//使用限制
            limitExplain: '',//限制说明
            dateStart: '',
            dateEnd: '',
            radio:'有效期内,任意时段',
            ticket:'',//卡券功能
            instructions:'',//使用说明
            date:'',//限制时间
            date1:'',//限制时间
            date2:'',//限制时间
            date3:'',//限制时间
            date4:'',//限制时间
            type:'',//shi否放入卡包
            desc:'',//说明
          },
          "genBaseInfoVO": {
            "codeType": "CODE_TYPE_QRCODE",
            "dateInfo": {
              "beginTimestamp": Date.parse(timer1),
              "endTimestamp": Date.parse(timer2),
              "type": "DATE_TYPE_FIX_TIME_RANGE"
            },
            "description": this.cashForm.desc,//卡券说明
            "getLimit": Number(this.cashForm.limit),
            "notice": this.cashForm.desc,
            "sku": {
              "quantity": Number(this.cashForm.inventory)
            },
            "title": this.cashForm.couponName
          },
          "leastCost": Number(this.cashForm.userLimit),
          "reduceCost": Number(this.cashForm.parValue)
        }
        console.log(json)
        this.$http.post(`${this.$store.state.path}/cards/usercards?communityId=${this.$store.state.storeId}`, json)
          .then(res => {
            console.log(res.body)
          }, res => {

          })
      },
      businessTimeFn2(){
        this.businessTime2 = false
        this.num=0;
      },
      addTime(){
        this.num++
        if(!this.businessTime2){
          this.businessTime2 = true
          this.flag = true
        }

        if(this.businessTime2&&this.num>1){
          this.businessTime3 = true
        }
      },
      go_back(){
        this.$router.back(-1);//f返回
      },
      addsSatisfyCoupons(){//新建满减券

      },
      addDiscountCoupons(){//新建折扣券

      }
    }
  }
</script>
<style scoped>
  .body .el-form-item{
    width: 400px!important;
  }
  .body .el-form-item .el-input{
    width: 80%;
  }
  .body .daijin .spandj{
    /*display: inline-block;*/
    margin-left: 10px;
  }
  .body {
    margin: 30px 60px 0 60px;
  }

  .body .a_top {
    height: 40px;
    position: relative;
  }

  .body span {
    /*font-size: 14px!important;*/
  }

  .menu {
    width: 100%;
    margin: 0;
    background-color: white;
  }

  .lastList div {
    line-height: 36px;
  }

  .see > span {
    font-size: 14px;
    position: relative;
    bottom: 5px;
  }

  .xj_fullcut > span {
    font-size: 14px;

  }

  .xj_fullcut {
    width: 85px;
    height: 34px;

  }

  .rq_fullcut > span {
    font-size: 14px;
  }

  .cx_fullcut > span {
    font-size: 14px;
  }

  .fullcut_menu {
    margin-top: 20px;
    font-size: 14px;
  }

  .font_cut {
    color: #999;
    font-size: 18px !important;
  }

  .body #c_input1 {
    width: 210px !important;
  }

  .body #c_input2 {
    width: 210px !important;
  }

  .reminder {
    font-size: 14px;
    color: #656D78;
  }

  .font_acut {
    font-size: 18px !important;
    color: #F58534;
  }

  .body .el-button {
    background-color: #F58534;
    color: white;
    border: #F58534;
  }

  .body .elem {

  }

  .generation {
    font-size: 14px;
    color: #656D78;
  }

  .porting_line {
    border-bottom: 1px solid #EBEBEB;
  }
</style>

